<template>
  <div id="dt" class="dt">
    <DtHeader />
    <div class="dt-main">
      <router-view />
    </div>
    <div>
      <router-view name="footer"/>
    </div>
  </div>
</template>

<script>
import DtHeader from '@/components/DtHeader'
export default {
  name: 'app',
  components: {
    DtHeader
  }
}
</script>

<style lang="scss">
// 初始化
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, img, b, u, i, dl, dt, dd, ol, ul, li, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  line-height: 1;
  font-size: 12px;
  width: 100%;
  height: 100%;
  font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
  overflow: hidden;
}
.dt {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .dt-main {
    flex: 1;
    overflow: hidden;
    // overflow-x: hidden;
  }
}
</style>
